<template>
  <a-modal
    :title="title"
    destroyOnClose
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleOk"
    width="700px"
  >
    <a-form
      :form="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 15 }"
      @submit="handleSubmit"
    >
      <a-form-item label="姓名">
        <a-input
          v-decorator="[
            'username',
            { rules: [{ required: true, message: '请输入姓名!' }] },
          ]"
        />
      </a-form-item>
      <a-form-item label="登录邮箱">
        <a-input
          v-decorator="[
            'email',
            {
              rules: [
                {
                  type: 'email',
                  message: '请输入正确的邮箱!',
                },
                { required: true, message: '请输入登录邮箱!' },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="选择身份">
        <a-radio-group
          v-decorator="[
            'identity',
            {
              initialValue: 'superadmin',
            },
          ]"
        >
          <a-radio value="superadmin">超级管理员</a-radio>
          <a-radio value="admin">管理员</a-radio>
          <a-radio value="user">用户</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="登录密码">
        <a-input
          v-decorator="[
            'password',
            {
              rules: [
                { required: true, message: '请输入登录密码!' },
                {
                  validator: validateToNextPassword,
                },
              ],
            },
          ]"
          @blur="handleConfirmBlur"
        />
      </a-form-item>
      <a-form-item label="确认登录密码">
        <a-input
          v-decorator="[
            'confirmPassword',
            {
              rules: [
                { required: true, message: '请再一次输入登录密码!' },
                {
                  validator: compareToFirstPassword,
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="id" v-if="!isAdd">
        <a-input v-decorator="['id']" disabled />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: "AddOrEditorUserModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      confirmDirty: false,
    };
  },
  computed: {
    isAdd() {
      return !(this.info && this.info.id);
    },
    title() {
      if (this.isAdd) {
        return "新增用户";
      }
      return "编辑用户";
    },
  },
  watch: {
    info(recordInfo) {
      this.$nextTick(() => {
        if (recordInfo && recordInfo.id) {
          this.form.setFieldsValue({
            id: recordInfo.id,
          });
        } else {
          this.form.resetFields();
        }
      });
    },
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { id: "user_manage_form" });
  },
  methods: {
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("您两次输入的密码不一致!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirmPassword"], { force: true });
      }
      callback();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleCancel() {
      this.$emit("closeModal");
    },
    handleOk() {
      console.log("sss");
      // this.$emit("closeModal");
    },
  },
};
</script>